<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <title>基于 layui 的极简社区页面模版</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="fly,layui,前端社区">
    <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">

    <!--全局样式-->
    <link th:include="common/static :: style" />
</head>
<body>
<!--头-->
<div th:include="common/templates :: header"></div>
<div th:include="common/templates :: header-nav"></div>

<div class="layui-container">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8 content detail">
            <div class="fly-panel detail-box">
                <h1 th:text="${post.title}"></h1>
                <div class="fly-detail-info">
                    <!-- <span class="layui-badge">审核中</span> -->
                    <span class="layui-badge layui-bg-green fly-detail-column" th:text="${post.category.name}"></span>

                    <span class="layui-badge layui-bg-black" th:if="${post.level gt 0}">置顶</span>
                    <span class="layui-badge layui-bg-red" th:if="${post.recommend}">精帖</span>

                    <div class="fly-admin-box" th:data-id="${post.id}">
                        <shiro:user>
                        <span class="layui-btn layui-btn-xs jie-admin" type="del" th:if="${post.user_id == session.profile.id}">删除</span>
                        </shiro:user>

                        <!--管理员权限-->
                        <shiro:hasRole name="admin">
                            <span class="layui-btn layui-btn-xs jie-admin" type="set" field="stick" rank="1">置顶</span>
                            <!-- <span class="layui-btn layui-btn-xs jie-admin" type="set" field="stick" rank="0" style="background-color:#ccc;">取消置顶</span> -->

                            <span class="layui-btn layui-btn-xs jie-admin" type="set" field="status" rank="1">加精</span>
                            <!-- <span class="layui-btn layui-btn-xs jie-admin" type="set" field="status" rank="0" style="background-color:#ccc;">取消加精</span> -->
                        </shiro:hasRole>
                    </div>

                    <span class="fly-list-nums">
                        <a href="#comment"><i class="iconfont" title="回答">&#xe60c;</i> <span th:text="${post.comment_count}"></span></a>
                        <i class="iconfont" title="人气">&#xe60b;</i> <span th:text="${post.view_count}"></span>
                    </span>
                </div>
                <div class="detail-about">
                    <a class="fly-avatar" th:href="@{'/u/' + ${post.user_id}}">
                        <img th:src="${post.author.avatar}" th:alt="${post.author.username}">
                    </a>
                    <div class="fly-detail-user">
                        <a th:href="@{'/u/' + ${post.user_id}}" class="fly-link">
                            <cite th:text="${post.author.username}"></cite>
                            <i class="iconfont icon-renzheng" title="认证信息：{{ rows.user.approve }}"></i>
                            <i class="layui-badge fly-badge-vip">VIP3</i>
                        </a>
                        <span>2017-11-30</span>
                    </div>
                    <div class="detail-hits" id="LAY_jieAdmin" th:data-id="${post.id}">
                        <span style="padding-right: 10px; color: #FF7200">悬赏：60飞吻</span>

                        <shiro:user>
                            <span class="layui-btn layui-btn-xs jie-admin" type="edit" th:if="${session.profile.id == post.user_id}">
                                <a th:href="@{/user/post(id=${post.id})}">编辑此贴</a>
                            </span>
                        </shiro:user>
                    </div>
                </div>
                <div class="detail-body photos" th:text="${post.content}">

                </div>
            </div>

            <div class="fly-panel detail-box" id="flyReply">
                <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
                    <legend>回帖</legend>
                </fieldset>

                <ul class="jieda" id="jieda">
                    <li th:data-id="${data.id}" class="jieda-daan" th:each="data:${pageData.records}">
                        <a name="item-1111111111"></a>
                        <div class="detail-about detail-about-reply">
                            <a class="fly-avatar" href="">
                                <img th:src="${data.author.avatar}" alt=" ">
                            </a>
                            <div class="fly-detail-user">
                                <a href="" class="fly-link">
                                    <cite th:text="${data.author.username}"></cite>
                                    <i class="iconfont icon-renzheng" title="认证信息：XXX"></i>
                                    <i class="layui-badge fly-badge-vip" th:text="${data.author.vipLevel}"></i>
                                </a>

                                <span th:text="${data.author.id == post.author.id ? '(楼主)': ''} "></span>
                                <!--
                                <span style="color:#5FB878">(管理员)</span>
                                <span style="color:#FF9E3F">（社区之光）</span>
                                <span style="color:#999">（该号已被封）</span>
                                -->
                            </div>

                            <div class="detail-hits">
                                <span th:text="${data.created}"></span>
                            </div>

                            <!--<i class="iconfont icon-caina" title="最佳答案"></i>-->
                        </div>
                        <div class="detail-body jieda-body photos" th:text="${data.content}">
                        </div>
                        <div class="jieda-reply">
                          <span class="jieda-zan zanok" type="zan">
                            <i class="iconfont icon-zan"></i>
                            <em th:text="${data.vote_up}"></em>
                          </span>
                          <span type="reply">
                            <i class="iconfont icon-svgmoban53"></i>
                            回复
                          </span>
                            <div class="jieda-admin">
                                <shiro:user>
                                <!--<span type="edit">编辑</span>-->
                                <span type="del" th:if="${data.user_id == session.profile.id}">删除</span>
                                <!-- <span class="jieda-accept" type="accept">采纳</span> -->
                                </shiro:user>
                            </div>
                        </div>
                    </li>

                    <!-- 无数据时 -->
                    <!-- <li class="fly-none">消灭零回复</li> -->
                </ul>
                <div th:if="${not #lists.isEmpty(pageData.records)}" style="text-align: center">
                    <div th:include="common/page :: page"></div>
                </div>

                <div class="layui-form layui-form-pane">
                    <form action="/user/post/comment" method="post">
                        <div class="layui-form-item layui-form-text">
                            <a name="comment"></a>
                            <div class="layui-input-block">
                                <textarea id="L_content" name="content" required lay-verify="required" placeholder="请输入内容"  class="layui-textarea fly-editor" style="height: 150px;"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <input type="hidden" name="postId" th:value="${post.id}">
                            <button class="layui-btn" lay-filter="comment" lay-submit>提交回复</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <!--本周热议-->
            <div th:include="common/templates :: weekPopular"></div>

            <div class="fly-panel">
                <div class="fly-panel-title">
                    这里可作为广告区域
                </div>
                <div class="fly-panel-main">
                    <a href="http://layim.layui.com/?from=fly" target="_blank" class="fly-zanzhu" time-limit="2017.09.25-2099.01.01" style="background-color: #5FB878;">LayIM 3.0 - layui 旗舰之作</a>
                </div>
            </div>

            <div class="fly-panel" style="padding: 20px 0; text-align: center;">
                <img src="/images/weixin.jpg" style="max-width: 100%;" alt="layui">
                <p style="position: relative; color: #666;">微信扫码关注 layui 公众号</p>
            </div>

        </div>
    </div>
</div>


<!--尾-->
<div th:include="common/templates :: footer"></div>

<script>
    layui.use(['fly', 'face'], function(){
        var $ = layui.$
            ,fly = layui.fly;
        //如果你是采用模版自带的编辑器，你需要开启以下语句来解析。

        $('.detail-body').each(function(){
            var othis = $(this), html = othis.html();
            othis.html(fly.content(html));
        });

        var form = layui.form;
        //监听提交
        form.on('submit(comment)', function (data) {
            fly.json("/user/post/comment", data.field, function (res) {
                if(res.code === 0){
                    layer.msg("操作成功");
                    setTimeout(function () {
                        location.reload();
                    }, 1000);

                } else {
                    layer.msg(res.msg);
                }
            });
            return false;
        });

    });
</script>

</body>
</html>